<template>
	<!-- <view>
		<view class="flex bg-white">
			<u--input
				placeholder="输入快递公司名称搜索"
				prefixIcon="search"
				border="none"
				v-model="searchExpress"
				prefixIconStyle="font-size: 22px;color: #909399"
			></u--input>
			<u-button :customStyle="{width: '120rpx'}" text="搜索" @click="searchExpressAction"></u-button>
		</view>
	</view> -->
	<u-index-list :index-list="indexList">
		<template v-for="(item, index) in itemArr">
			<u-index-item>
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<view class="list-cell" hover-class="list-cell-active" @click="selectExpress(cell)" :key="cell.com" v-for="(cell, indexin) in item">
					{{cell.exp_name}}
				</view>
			</u-index-item>
		</template>
	</u-index-list>
</template>

<script>
	import { mapActions, mapState } from 'vuex';
	import { pinyin } from 'pinyin-pro';
	
	export default {
		data() {
			return {
				searchExpress: ''
			}
		},
		computed: {
			...mapState(['expressAllList']),
			expressListObj() {
				if (!this.expressAllList) {
					return null;
				}
				const tempObj = {};
				this.expressAllList.forEach((express) => {
					// console.log('---- this.expressAllList ----0', express.exp_name)
					const pystr = pinyin(express.exp_name, { toneType: 'none' });
					// const pystr = pinyin(express.exp_name, { mode: 'normal' });
					const pystrFirst = pystr[0].toUpperCase();
					// console.log('---- this.expressAllList ----1', express.exp_name,  pystr, pystrFirst)
					if (!tempObj[pystrFirst]) {
						tempObj[pystrFirst] = [express];
					} else {
						tempObj[pystrFirst].push(express)
					}
				})
				// console.log('---- tempObj ----', tempObj)
				return tempObj;
			},
			indexList() {
				if (!this.expressListObj) {
					return [];
				}
				return Object.keys(this.expressListObj).sort();
			},
			itemArr() {
				if (!this.expressListObj) {
					return [];
				}
				return Object.keys(this.expressListObj).sort().map((key) => this.expressListObj[key]);
			}
		},
		onReady() {
			this.getExpressList();
		},
		methods: {
			...mapActions(['getExpressList','setExpressItem']),
			selectExpress(item) {
				this.setExpressItem({item});
				uni.navigateBack();
			},
			searchExpressAction() {
				const item = this.expressAllList.find((express) => express.exp_name.includes(this.searchExpress));
				if (item) {
					uni.pageScrollTo({
						selector: '#'+item.com
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		&.list-cell-active{
			background-color: #ccc;
		}
	}
</style>